<template>
  <div class="my-button">
    <span v-if="color === true" class="my-button-color">
      <el-button plain :style="'width:'+ width +'px;' + 'height:' + height + 'px;'">
        <slot></slot>
      </el-button>
    </span>
    <span v-else-if="color === 'none'" class="my-button-none">
      <el-button plain :style="'width:'+ width +'px;' + 'height:' + height + 'px'">
        <slot></slot>
      </el-button>
    </span>
    <span v-else  class="my-button-plain">
      <el-button plain :style="'width:'+ width +'px;' + 'height:' + height + 'px'">
        <slot></slot>
      </el-button>
    </span>
  </div>
</template>

<script>
export default {
  props: ["color",'width','height'],
  data() {
    return {
      
    }
  }
};
</script>

<style>
.my-button-color .el-button {
  background-color: #006eff;
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(255, 255, 255);
}

.my-button-plain .el-button {
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(153, 153, 153);
}

.my-button-none .el-button {
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(153, 153, 153);
  background-color: transparent;
}
</style>